<template>
       <div class="app1">
        <h4>父组件1</h4>
        <h4>a:{{ a }}</h4>
        <h4>b:{{ b }}</h4>
        <h4>c:{{ c }}</h4>
        <h4>d:{{ d }}</h4>
        <h4>e:{{ e }}</h4>
        <Zattrs1 :a="a" :b="b" :c="c" :updateA='updateA' v-bind="{d:77 ,e:88} "/>
       </div>
</template>
    
<script setup lang='ts'>
import { ref } from 'vue';
import Zattrs1 from './Zattrs1.vue';

let a = ref(1)
let b = ref(2)
let c = ref(3)
let d = ref(4)
let e = ref(5)

function updateA(value:number) {
    a.value  += value
}
</script>
    
<style scoped>
    .app1{
        width: 80%;
        padding: 20px;
        background-color: bisque;
        font-size: 17px;
        border-radius: 5px;
    }
</style>